<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 2. 准备一个具有宽高的dom容器 -->
  <!-- 柱状图 -->
  <div id="main" style="width: 600px;height: 400px;"></div>
  <!-- 折线图 -->
  <div id="main1" style="width: 600px;height: 400px;"></div>
  <!-- 1. 引入echarts插件 -->
  <!-- .min.js 压缩版 - 代码体积小 - 运行速度快 -->
  <script src="./lib/echarts.min.js"></script>
  <script>
    // 之前的认识: 封装是解决多次使用的场景 - 方便复用
    // echarts 封装 - 是为了复用么? 不是, 是为了更好的维护 --> 起变量名 ...
    function initBarChart() {
      // 3. 初始化一个echarts的实例对象
      // const myChart = echarts.init(dom对象)
      const myChart = echarts.init(document.querySelector('#main'))

      // 4. 准备配置项
      const option = {
        // 标题组件
        title: {
          text: 'ECharts 入门示例123'  // 主标题
        },
        // 提示框组件
        tooltip: {
        },
        // 图例组件
        legend: {
          // data: ['销量']
        },
        // x轴的数据
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        // y轴 
        yAxis: {},
        series: [
          {
            // 系列名称，用于tooltip的显示，legend 的图例筛选
            name: '销量',
            type: 'bar',
            data: [55, 20, 46, 10, 10, 20] // x轴对应的数据
          }
        ]
      };

      // 将配置项和实例对象建立关联
      // 实例对象.setOption(配置项)
      myChart.setOption(option)
    }
    initBarChart()

    // 比如想在完成一个折线图
    function initLineChart() {
      // 3. 初始化一个echarts的实例对象
      // const myChart = echarts.init(dom对象)
      const myChart = echarts.init(document.querySelector('#main1'))

      // 4. 准备配置项
      const option = {
        // 颜色列表
        color: ['red', 'green', 'pink', 'blue', 'yellow'],
        // 背景色 - 默认是透明的
        backgroundColor: 'skyblue',
        // 标题组件
        title: {
          text: '折线图'  // 主标题
        },
        tooltip: {  // 提示框组件
          trigger: 'item'  // 触发类型 axis 轴上触发 item 数据项本身触发 
        },
        legend: {  // 图例组件

        },
        grid: {  // 直角坐标系网格
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true // grid 区域是否包含坐标轴的刻度标签
        },
        // 工具箱
        toolbox: {
          feature: {
            saveAsImage: {}  // 保存为图片
          }
        },
        xAxis: {
          type: 'category',  // 离散的类目数据
          boundaryGap: false,
          data: ['周一', '星期二', '三', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'  // 数据类型 数值
        },
        // 系列数据 
        series: [
          {
            name: 'Email',
            type: 'line', // bar 柱状图 line 折线图  pie 饼图
            stack: 'Total', // 数据堆叠
            data: [120, 282, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      // 将配置项和实例对象建立关联
      // 实例对象.setOption(配置项)
      myChart.setOption(option)
    }
    initLineChart()

    // 比如饼图...
    function initPieChart() {
      
    }
  </script>
</body>

</html>